//获取操作对象
var box = document.querySelector('.lp')
var lunbotu = document.querySelector('.lunbotu')
var imgs = lunbotu.querySelectorAll('img')
var lbtn = document.querySelector('.left')
var rbtn = document.querySelector('.right')
var bool = true
//判断图片是否可以继续切换，true:可用，false:不可以
//创建定时器名称
var dsq1, dsq2
//创建图片下标
var imgIndex = 1
//获取当前图片的宽度
var imgW = imgs[0].offsetWidth
//打开页面时，直接显示第二个图片
box.scrollLeft = imgIndex * imgW
// console.log(box.scrollLeft)
//图片切换
function autoMove() {
    imgIndex++
    //判断当前图片下标是否大于2
    if (imgIndex > 4) {
        box.scrollLeft = 1520
        imgIndex = 2
    }
    //调用运动函数，让图片在切换的时候有滑动效果
    move()
}

//使用定时器，每间隔3秒调用autoMove
dsq1 = setInterval(autoMove, 3000)
//给大盒子对象绑定鼠标移入移出事件
box.onmouseover = function () {
    //停止图片切换
    clearInterval(dsq1)
}
box.onmouseout = function () {
    //重新启动定时，进行图片切换
    dsq1 = setInterval(autoMove, 3000)
}
rbtn.onclick = function () {
    if (bool) {
        bool = false
        //调用autoMove()切换图片
        autoMove()
    }
}
//onvisibilitychange:当浏览器窗口最小化时，停止轮播：打开浏览器时，启动轮播
document.onvisibilitychange = function () {
    var bb = document.hidden
    if (bb) {
        clearInterval(dsq1)
    } else {
        //重新启动定时，进行图片切换
        dsq1 = setInterval(autoMove, 3000)
    }
}
//给左边按钮绑定点击事件
lbtn.onclick = function () {
    if (bool) {
        bool = false
        imgIndex--
        if (imgIndex < 0) {
            //把当前位置立即切换到倒数第二张图片上
            box.scrollLeft = (imgs.length - 2) * imgW
            imgIndex = imgs.length - 2
        }
        move()
    }
}
//运动函数
function move() {
    //获取开始位置，也就是当前位置
    var start = box.scrollLeft
    // console.log(start)
    //获取结束位置，也就是将要到达的位置
    var end = imgIndex * imgW

    // console.log(end)
    //设置开始步数
    var a1 = 0
    //设置结束步数
    var b1 = 20
    //设置步长
    var speed = (end - start) / 20
    // console.log(speed)
    //清除定时器
    clearInterval(dsq2)
    //创建定时器
    dsq2 = setInterval(function () {
        a1++
        if (a1 >= b1) {
            clearInterval(dsq2)
            //图片切换完毕时，把bool变为true
            bool = true
        }
        //吧计算结果重新赋值给start
        start = start + speed
        // console.log(start)
        //让当前位置进行移动
        box.scrollLeft = start
    }, 30)
}
var lkp = document.querySelector('.like_p');
(async function () {
    let txt = await PromiseAjax({
        url: "../php/ANTAsy.php",
    })

    //把字符串转为数组
    var ar1 = JSON.parse(txt)
    //创建字符串，拼接所有内容
    var str = ''
    //遍历数组元素
    ar1.forEach((item) => {
        str += `
            <div>
                <a href="../html/ANTAdetaile.html?id=${item.id}"><img src="${item.img}">
                    <span>${item.title}</span>
                </a>
            </div>
            `
    })
    //把拼接好的内容，渲染到页面
    lkp.innerHTML = str
})()